<template>
  <div class="containner">
    <!-- 头部 -->
    <a-row style="width: 100%">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol" class="flexRow header">
        <a-form-item label="应用名称">
          <a-input v-model:value="formState.app_name" placeholder="请输入应用名称" />
        </a-form-item>
        <a-form-item class="flexbtns">
          <a-button class="marginleft_10" @click.stop="reSet">重置</a-button>
          <a-button type="primary" class="marginleft_10" @click.stop="getPageList">查询</a-button>
        </a-form-item>
        <div class="header-right">
          <a-radio-group v-model:value="formState.enable" @change="getPageList">
            <a-radio-button value="1">启用项目</a-radio-button>
            <a-radio-button value="0">禁用项目</a-radio-button>
            <a-radio-button :value="nullValue">全部项目</a-radio-button>
          </a-radio-group>
          <a-button type="primary" class="addBtn" @click.stop="add">添加项目</a-button>
        </div>
      </a-form>
    </a-row>
    <div class="cnt-warpper" ref="containnerRef">
      <div class="item" v-for="(item, index) in list.value" :key="index">
        <a-row class="card-header">
          <div class="card-header-left">{{ item.name }}</div>
          <div class="card-header-right">
            <div class="enableStatus" v-if="item.disable == 1">启用</div>
            <div class="disabledStatus" v-if="item.disable == 0">禁用</div>
          </div>
        </a-row>
        <div class="card-cnt">
          <a-row class="card-name"> 今日存储数据量 </a-row>
          <a-row class="count-row">
            <div class="count-count">{{ item.data_count ? item.data_count : 0 }}</div>
            <div class="count-edite" @click.stop="editeClick(item)">
              <img src="../../../assets/images/editeIcon.png" />
            </div>
          </a-row>
          <a-row class="time"> 创建日期：{{ item.create_time ? item.create_time : '--' }} </a-row>
        </div>
      </div>
    </div>
    <Dialog ref="dialogRef" @success="submitSuccess" @register="registerModel" />
  </div>
</template>

<script>
  import { defineComponent, reactive, ref, onMounted, onUnmounted } from 'vue';
  import { serviceEnableStatus } from '/@/api/sys/gateway/gateway';
  import { useMessage } from '/@/hooks/web/useMessage';
  import Dialog from './addorediteModel.vue';
  import moment from 'moment';
  import { useModal } from '/@/components/Modal';
  import { getStorageList } from '/@/api/sys/storeData';

  export default defineComponent({
    components: { Dialog },
    setup() {
      const [registerModel, { openModal: openModal }] = useModal();
      const { createMessage } = useMessage();
      const nullValue = ref(null);
      const dialogRef = ref(null);
      const isUpdate = ref(false);
      const current1 = ref(1);
      const total = ref();
      const containnerRef = ref();

      //搜索参数
      const formState = reactive({
        name: '',
        enable: '1',
      });
      let list = reactive([]);
      onMounted(() => {
        containnerRef.value.style.height = document.body.clientHeight - 195 + 'px';
        window.onresize = async () => {
          containnerRef.value.style.height = document.body.clientHeight - 195 + 'px';
        };
        getPageList();
      });

      onUnmounted(() => {
        // 组件销毁后解绑事件
        window.onresize = null;
      });
      //重置
      function reSet() {
        formState.name = '';
        current1.value = 1;
        getPageList();
      }

      //筛选
      function screen() {
        if (formState.enable == 1) {
          let data = list.value.filter(function (item) {
            return item.disable == 1;
          });
          list.value = data;
        } else if (formState.enable == 0) {
          let data = list.value.filter(function (item) {
            return item.disable == 0;
          });
          list.value = data;
        }
      }
      //添加
      function add() {
        openModal(true, {
          isUpdate: false,
        });
      }
      //编辑
      function editeClick(rowdata) {
        let obj = JSON.parse(JSON.stringify(Object.assign(rowdata, rowdata.config)));
        obj.disable = obj.disable == 1 ? false : true;
        openModal(true, {
          isUpdate: true,
          rowdata: obj,
        });
      }
      //切换分页数量
      function chagepageNum(e) {
        current1.value = e;
        getPageList();
      }
      //更新云服务启用状态
      function changeEnableStatus(e, id) {
        serviceEnableStatus({
          id: id,
          enable: parseInt(e),
        }).then(() => {
          createMessage.success(e == 1 ? '启用成功' : '停用成功');
        });
      }

      //添加编辑成功回调
      function submitSuccess(e) {
        createMessage.success(e.isUpdate ? '修改成功' : '编辑成功');
        getPageList();
      }
      //获取分页列表
      function getPageList() {
        getStorageList({
          name: formState.name,
        }).then((res) => {
          list.value = res;
          list.value.map((item) => {
            delete item.config.disable;
            item.create_time = moment(parseInt(item.create_time) * 1000).format(
              'YYYY-MM-DD HH:mm:ss',
            );
          });
          total.value = res.total;
          screen();
        });
      }

      return {
        getPageList,
        registerModel,
        reSet,
        containnerRef,
        screen,
        chagepageNum,
        list,
        isUpdate,
        dialogRef,
        add,
        editeClick,
        formState,
        labelCol: { span: 7 },
        wrapperCol: { span: 18 },
        submitSuccess,
        total,
        changeEnableStatus,
        nullValue,
      };
    },
  });
</script>

<style scoped lang="less">
  .containner {
    position: relative;
    padding: 21px 16px 5px;
    margin: 16px;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
    font-family: PingFangSC, PingFangSC-Regular;
    height: calc(100% -180px);
    .header {
      width: 100%;
      position: relative;
      .flexbtns {
        display: flex;
        width: 400px;
      }
      .header-right {
        display: flex;
        align-items: baseline;
        position: absolute;
        right: 0px;
        top: 0px;
        margin: auto;
        .addBtn {
          margin-left: 32px;
        }
      }
      .marginleft_10 {
        margin-left: 10px;
      }
    }
    .flexRow {
      width: 100%;
      display: flex;
      align-items: center;
      align-content: center;
    }
    .cnt-warpper {
      display: flex;
      flex-wrap: wrap;
      overflow-y: scroll;
      align-items: baseline;
      align-content: baseline;
      &::-webkit-scrollbar {
        display: none;
      }
      .item {
        width: 24%;
        border: 1px solid #efefef;
        align-items: center;
        margin-bottom: 20px;
        &:not(:nth-child(4n)) {
          margin-right: 1.33%;
        }
        .card-header {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0px 16px;
          box-sizing: border-box;
          font-weight: bold;
          height: 40px;
          justify-content: space-between;
          font-family: PingFangSC, PingFangSC-Medium;
          height: 40px;
          background-color: #f5f9ff;
          .card-header-left {
            font-size: 16px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.8);
            position: relative;
            padding-left: 12px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 70%;
            &::before {
              content: '';
              display: inline-block;
              position: absolute;
              left: 0px;
              top: 2px;
              bottom: 0px;
              margin: auto;
              width: 4px;
              height: 16px;
              background: #2367fa;
              border-radius: 2px;
            }
          }
          .card-header-right {
            .enableStatus {
              font-size: 16px;
              font-weight: 500;
              position: relative;
              padding-left: 16px;
              box-sizing: border-box;
              color: #2c68ff;
              &::before {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0px;
                top: 2px;
                bottom: 0px;
                width: 8px;
                height: 8px;
                background: #2c68ff;
                border-radius: 50%;
                margin: auto;
              }
            }
            .disabledStatus {
              font-size: 16px;
              font-weight: 500;
              position: relative;
              padding-left: 16px;
              box-sizing: border-box;
              color: rgba(58, 56, 55, 0.25);
              &::before {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0px;
                top: 2px;
                bottom: 0px;
                width: 8px;
                height: 8px;
                background: #c5c8cd;
                border-radius: 50%;
                margin: auto;
              }
            }
          }
        }
        .card-cnt {
          padding: 12px 16px;
          box-sizing: border-box;
          .card-name {
            color: rgba(0, 0, 0, 0.8);
            font-size: 16px;
          }
          .count-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 12px 0px;
            .count-count {
              text-align: center;
              display: flex;
              font-weight: 500;
              font-size: 40px;
            }
            .count-edite {
              cursor: pointer;
              width: 40px;
              height: 40px;
              background: #f7f9ff;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 13px;
                height: 14px;
              }
            }
          }
          .time {
            font-size: 14px;
            margin-top: 12px;
            color: #a5a4a4;
          }
        }
      }
    }
  }
</style>
